<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区领导决策-渠道分析</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/page.css">
</head>
<body>
    <div class="box">
        <div class="header head-font">渠道分析</div>
          <div class="chart-box">
            <h3 class="title tit-font">分销渠道分析</h3>
            <div class="my-chart" id="myChart4"></div>
          </div>
      </div>
    <script src="../plugin/ECharts/echarts.js"></script>
    <script src="../plugin/jquery-1.11.1.min.js"></script>
    <script>
       function drawLine4 () {
        let data = [
        { value: 12, name: '小程序' },
        { value: 20, name: '线下售票' },
        { value: 40, name: 'OTA' },
        { value: 28, name: '旅行社' }
      ]
      var color = {
        start: ['#9A4CFB', '#FF6488', '#4964C6', '#44D798'],
        end: ['#fff', '#fff', '#fff', '#fff']
      }
      var seriesData = data.map((item, index) => {
        return {
          name: item.name,
          value: item.value,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                offset: 0,
                color: color.start[index]
              }, {
                offset: 1,
                color: color.end[index]
              }])
            }
          }
        }
      })
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart4'))
      // 绘制图表
      var option = {
        series: [
          {
            name: '渠道分析',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            data: seriesData,
            color: ['#9A4CFB', '#FF6488', '#4964C6', '#44D798'],
            labelLine: {
              normal: {
                length: 30,
                length2: 50,
                lineStyle: {
                  type: 'solid'
                }
              }

            },
            label: {
              normal: {
                formatter: function (params) {
                  if (params.dataIndex === 0) {
                    return '{color1|' + params.value + '%}' + '\n{black|' + params.name + '}'
                  } else if (params.dataIndex === 1) {
                    return '{color2|' + params.value + '%}' + '\n{black|' + params.name + '}'
                  } else if (params.dataIndex === 2) {
                    return '{color3|' + params.value + '%}' + '\n{black|' + params.name + '}'
                  } else if (params.dataIndex === 3) {
                    return '{color4|' + params.value + '%}' + '\n{black|' + params.name + '}'
                  }
                },
                rich: {
                  black: {
                    color: '#666',
                    padding: [5, -48],
                    textAlign: 'left',
                    fontSize: '14px',
                    fontFamily: 'PingFangSC'
                  },
                  color1: {
                    padding: [5, -48],
                    textAlign: 'left',
                    fontWeight: 700,
                    fontFamily: 'PingFangSC',
                    color: '#9A4CFB'
                  },
                  color2: {
                    padding: [5, -48],
                    textAlign: 'left',
                    fontWeight: 700,
                    fontFamily: 'PingFangSC',
                    color: '#FF6488'
                  },
                  color3: {
                    padding: [5, -48],
                    textAlign: 'left',
                    fontWeight: 700,
                    fontFamily: 'PingFangSC',
                    color: '#4964C6'
                  },
                  color4: {
                    padding: [5, -48],
                    textAlign: 'left',
                    fontWeight: 700,
                    fontFamily: 'PingFangSC',
                    color: '#44D798'
                  }
                }
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    }
    drawLine4()
    </script>
</body>
</html>